<template>
    <div>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px" id="form-box">
        <h2 id="login-title">用户登录</h2>
        <el-form-item label="用户名" prop="userName">  <!-- prop：设置需要校验的字段名 -->
          <el-input v-model="form.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit('form')">登录</el-button>
          <el-button type="info" @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

</template>

<script>
    export default {
        name: "Login",
      data() {
        return {
          form: {
            userName: '',
            password:''
          },
          // 验证规则
          rules: {
            userName: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ]
          }
        }
      },
      mounted(){
          //绑定事件
          window.addEventListener('keydown',this.keyDown);
      },
      methods: {
          keyDown(e) {
              //如果是回车则执行登录方法
              if (e.keyCode == 13) {
                  this.submit();
              }
          },
          submit() {
              var vm = this; // 将this提取出来方便使用

              // 验证表单
              this.$refs['form'].validate((valid) => {
                  if (valid) {
                      // 如果验证通过，发送axios请求
                      this.axios({
                          method: 'get',
                          url: "http://localhost:8082/login?userNickname=" + this.form.userName + "&userPwd=" + this.form.password
                      }).then(function (response) { // 成功回调函数

                          if (response.data.code == 0) {
                              sessionStorage.setItem('isLogin', 'true');
                               var user=response.data.data;
                              //将user对象放到vuex中
                              vm.$store.dispatch("asyncUpdateUser",user)
                              vm.$router.push("/home");

                          } else {
                              vm.$message.error(response.data.message);
                          }
                      })
                  } else {
                      return false;
                  }
              });


          },
          //重置
          resetForm(formName) {
              this.$refs[formName].resetFields();
          },
          destroyed() {
              window.removeEventListener('keydown', this.keyDown, false);

          }
      }
    }

</script>

<style scoped>
  #form-box{
    width: 530px;
    height: 400px;
    border: 0px solid gray;
    margin: 100px auto;
    padding: 20px 50px 20px 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px #0000ff;
  }

  #login-title{
    text-align: center;
    margin: 50px;
  }
</style>
